<template>
	<view>
		<view class="tableBar">
			<view class="flex-jf-sa-ac mt-10" style="padding-bottom: 5rpx;">
				<view class="barItem" @click="bindLink(item)" v-for="item, index of navList" :key="index">
					<image class="icon" v-if="index!=2" :src="item[actveIndex==index ? 'actveIcon' : 'icon']" mode=""></image>
					<view class="prominent" v-else>
						<image class="icon" :src="item[actveIndex==index ? 'actveIcon' : 'icon']" mode=""></image>
					</view>
					<text class="barText" :style="{color:actveIndex==index ? 'var(--color-primary)' : '#8a8a8a'}">{{item.title}}</text>
				</view>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<view style="height: 130rpx;"></view>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>
<script lang="ts" setup>
	const props = defineProps({
		actveIndex: {
			type: Number,
			default: 0
		},
	})
	const navList = [
		{
			title: '首页',
			icon: '/static/navIcon/index.png',
			actveIcon: '/static/navIcon/index-actve.png',
			pagePath:'/pages/index/index'
		},
		{
			title: '商品',
			icon: '/static/navIcon/curriculum.png',
			actveIcon: '/static/navIcon/curriculum-actve.png',
			pagePath:'/pages/goodsList/goodsList'
		},
		{
			title: '约课',
			icon: '/static/navIcon/about.png',
			actveIcon: '/static/navIcon/about-actve.png',
			pagePath:'/pages/about/about'
		},
		{
			title: '动态',
			icon: '/static/navIcon/dynamic.png',
			actveIcon: '/static/navIcon/dynamic-actve.png',
			pagePath:"/pages/dynamic/dynamic",
		},
		{
			title: '我的',
			icon: '/static/navIcon/my.png',
			actveIcon: '/static/navIcon/my-actve.png',
			pagePath:"/pages/my/my",
		}
	]
	function bindLink(item:typeof navList[0]){
		uni.switchTab({
			url:item.pagePath
		})
	}
</script>

<style scoped lang="scss">
	// .u-safe-area-inset-bottom {
	//   padding-bottom: 0;
	//   padding-bottom: constant(safe-area-inset-bottom);
	//   padding-bottom: env(safe-area-inset-bottom);
	// }
	.tableBar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top: 1rpx solid #ddd;
		z-index: 99999999;
		.barItem {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			padding: 0 20rpx;
			.prominent{
				box-sizing: border-box;
				transform: scale(2.4) translateY(-19rpx);
				border-radius: 50%;
				box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1) inset;
				background: #fff;
				font-size: 0;
				z-index: 0;
				.icon{
					font-size: 0;
					box-sizing: border-box;
					transform: scale(0.75);
				}
			}
			.icon {
				width: 55rpx;
				height: 55rpx;
			}

			.barText {
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}
</style>